<template>
  <div class="page-container">
    <HeaderTop style="display: none;"></HeaderTop>
    <Search class="search-component"></Search>
    <el-backtop></el-backtop>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 轮播和分类区域 - 完全重构 -->
      <el-row class="hero-section">
        <el-col :span="16" :offset="4">
          <div class="hero-wrapper">
            <!-- 分类列表 -->
            <div class="category-list" style="font-weight: 700;">
              <ul>
                <li v-for="item in fc" 
                    :key="item.id" 
                    @click="gotoType(item.id)"
                    class="category-item" style="font-size: 16px;">
                  {{item.name}}
                  <i class="el-icon-arrow-right"></i>
                </li>
              </ul>
            </div>

            <!-- 轮播图 -->
            <div class="banner-container">
              <el-carousel 
                height="500px"
                arrow="always" 
                :interval="4000"
                indicator-position="none"
                class="banner-carousel">
                <el-carousel-item v-for="(item, index) in Slide" :key="index">
                  <div class="banner-overlay"></div>
                  <img :src="item" alt="" class="banner-img">
                  <div class="banner-content">
                    <h2 class="banner-title">{{ getSlideTitle(index) }}</h2>
                    <p class="banner-description">{{ getSlideDescription(index) }}</p>
                    <el-button type="primary" round class="banner-button">
                      {{ index % 2 === 0 ? '立即查看' : '了解更多' }}
                    </el-button>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 推荐商品区域 -->
      <section class="section-container" v-if="recommendpro!==''">
        <div class="section-header">
          <h2>推荐商品</h2>
          <div class="divider"></div>
        </div>
        
        <el-row class="product-grid">
          <el-col :span="16" :offset="4">
            <ul class="product-list">
              <li v-for="item in recommendpro" 
                  :key="item.id"
                  class="product-card"
                  :class="{'my-product': item.uid === $store.state.userid}">
                <div class="my-product-badge" v-if="item.uid === $store.state.userid">
                  <i class="el-icon-star-on"></i> 我的商品
                </div>
                <div class="product-image" @click="gotoDetails(item.id)">
                  <img :src="item.images[0]" :alt="item.name">
                </div>
                <div class="product-info">
                  <h3 class="product-name" @click="gotoDetails(item.id)">{{item.name}}</h3>
                  <div class="product-price">
                    <div class="price-info">
                      <span class="price-symbol">¥</span>
                      <span class="price-value">{{item.currentprice}}</span>
                      <span class="original-price" v-if="item.originalprice && item.originalprice > item.currentprice">
                        ¥{{item.originalprice}}
                      </span>
                    </div>
                    <el-tag 
                      v-if="getDiscount(item)"
                      size="mini" 
                      type="danger" 
                      class="discount-tag">
                      {{getDiscount(item)}}折
                    </el-tag>
                  </div>
                  <div class="product-meta">
                    <span class="product-date">{{item.creattime}}</span>
                    <el-button 
                      v-if="item.uid !== $store.state.userid"
                      :type="item.isCollected ? 'success' : 'primary'"
                      size="small"
                      @click="addLove(item.id,item.uid)"
                      class="collect-btn"
                      :class="{'is-collected': item.isCollected}">
                      {{ item.isCollected ? '已收藏' : '收藏' }}
                    </el-button>
                    <span v-else class="my-product-label">
                      <i class="el-icon-user"></i> 我发布的
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </section>

      <!-- 热门商品区域 -->
      <section class="section-container">
        <div class="section-header">
          <h2>热门商品</h2>
          <div class="divider"></div>
        </div>

        <el-row class="hot-products">
          <el-col :span="16" :offset="4">
            <div class="hot-grid">
              <div v-for="hotpro in hotpros" 
                   :key="hotpro.id" 
                   class="hot-category">
                <div class="hot-category-header">
                  <div class="hot-category-title">
                    <i :class="getCategoryIcon(hotpro.id)" class="hot-category-icon"></i>
                    <span>{{hotpro.name}}</span>
                  </div>
                  <el-button type="text" size="small" class="view-more-btn" @click="gotoType(hotpro.id)">
                    查看更多 <i class="el-icon-arrow-right"></i>
                  </el-button>
                </div>
                <ul class="hot-items">
                  <li v-for="(item, index) in hotpro.item.slice(0, 5)" 
                      :key="item.id"
                      @click="gotoDetails(item.id)"
                      class="hot-item">
                    <el-badge value="热门" class="hot-badge" v-if="item.clicks > 50"></el-badge>
                    <div class="hot-item-content">
                      <span class="item-name">{{item.name}}</span>
                      <div class="item-meta">
                        <span class="item-price">¥{{item.currentprice}}</span>
                        <span class="item-date">{{item.creattime}}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </section>

      <!-- 最新上架区域 -->
      <section class="section-container" v-if="newpro!==''">
        <div class="section-header">
          <h2>最新上架</h2>
          <div class="divider"></div>
        </div>

        <el-row class="product-grid">
          <el-col :span="16" :offset="4">
            <ul class="product-list">
              <li v-for="item in newpro" 
                  :key="item.id"
                  class="product-card"
                  :class="{'my-product': item.uid === $store.state.userid}">
                <div class="my-product-badge" v-if="item.uid === $store.state.userid">
                  <i class="el-icon-star-on"></i> 我的商品
                </div>
                <div class="product-image" @click="gotoDetails(item.id)">
                  <img :src="item.images[0]" :alt="item.name">
                </div>
                <div class="product-info">
                  <h3 class="product-name" @click="gotoDetails(item.id)">{{item.name}}</h3>
                  <div class="product-price">
                    <div class="price-info">
                      <span class="price-symbol">¥</span>
                      <span class="price-value">{{item.currentprice}}</span>
                      <span class="original-price" v-if="item.originalprice && item.originalprice > item.currentprice">
                        ¥{{item.originalprice}}
                      </span>
                    </div>
                    <el-tag 
                      v-if="getDiscount(item)"
                      size="mini" 
                      type="danger" 
                      class="discount-tag">
                      {{getDiscount(item)}}折
                    </el-tag>
                  </div>
                  <div class="product-meta">
                    <span class="product-date">{{item.creattime}}</span>
                    <el-button 
                      v-if="item.uid !== $store.state.userid"
                      :type="item.isCollected ? 'success' : 'primary'"
                      size="small"
                      @click="addLove(item.id,item.uid)"
                      class="collect-btn"
                      :class="{'is-collected': item.isCollected}">
                      {{ item.isCollected ? '已收藏' : '收藏' }}
                    </el-button>
                    <span v-else class="my-product-label">
                      <i class="el-icon-user"></i> 我发布的
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </section>
    </div>

    <FooterBottom></FooterBottom>
  </div>
</template>

<script>
import HeaderTop from "../components/Header.vue";
import Search from "../components/Search.vue";
import FooterBottom from "../components/Footer.vue";
import moment from "moment";

export default {
  components: {
    HeaderTop,
    Search,
    FooterBottom
  },
  data () {
    return {
      Slide: ["https://ts1.cn.mm.bing.net/th/id/R-C.6082f138e560410dd6755e2aa9059dc3?rik=8U0KQEhuNAkN%2bg&riu=http%3a%2f%2fi2.hdslb.com%2fbfs%2farchive%2fa588b2f6d1c8dab6d9802835a03b14392034ece4.jpg&ehk=3bFRUZ3t%2bd0XCFEdwB0%2bU9oeaOmtitLb34smpqf5om0%3d&risl=&pid=ImgRaw&r=0","https://p0.ssl.qhimgs1.com/t0126e6914758a65194.jpg"],
      count: 1,
      seen: false,
      current: 0,
      imgwidth: "30px",
      fc: '',
      hotpros: [{//热门商品
        "id": "1",
        "name": "教材、教辅",
        "color": "solid #FF7F24",
        "item":''
      }, {
        "id": "2",
        "name": "手机、电脑",
        "color": "solid #4169E1",
        "item":''
      }, {
        "id": "3",
        "name": "自行车、电动车",
        "color": "solid #48D1CC",
        "item":''
      }, {
        "id": "4",
        "name": "书桌、书架",
        "color": "solid #FF0000",
        "item":''
      }],
      newpro: '',//最新商品
      recommendpro: ''//推荐商品
    };
  },
  created() {
    //加载一级分类目录
    this.$axios.get('/classify/flnb', {
      params: {}
    }).then(res => {
      this.fc = res.data;
    });

    //加载热门商品
    let arrayHot = [1,2,3,4];
    arrayHot.forEach((item,index,arr) =>{
      this.$axios.get('/product/selectByHot', {
        params: {typeid: item}
      }).then(res => {
        this.hotpros[index].item = res.data;
      })
    });
    //加载最新上架商品
    this.$axios.get('/product/selectByNew', {
      params: {}
    }).then(res => {
      res.data.forEach((res,index) => {
        if(res.images != null){
          res.images = eval('('+res.images+')');
        }
        // 检查商品收藏状态
        if(this.$store.state.userid !== 0) {
          this.checkCollectionStatus(res);
        } else {
          res.isCollected = false;
        }
      });
      this.newpro = res.data;
    });
    //加载官方推荐商品
    this.$axios.get('/product/selectByCommend', {
      params: {}
    }).then(res => {
      res.data.forEach((res,index) => {
        if(res.images != null){
          res.images = eval('('+res.images+')');
        }
        // 检查商品收藏状态
        if(this.$store.state.userid !== 0) {
          this.checkCollectionStatus(res);
        } else {
          res.isCollected = false;
        }
      });
      this.recommendpro = res.data;
    });
    //点击量+1
    // this.clickNum();
  },
  methods: {
    //跳转商品详情页面
    gotoDetails (pid) {
      this.$router.push({
        name: 'productDetails',
        query: {
          id: pid
        }
      });
    },
    //跳转商品分类页面
    gotoType (id) {
      this.$router.push({
        name: 'productType',
        query: {
          id: id
        }
      });
    },
    //添加商品进收藏方法
    addLove(id,uid){
      if(this.$store.state.userid !== 0){
        //判断是否是自己的商品
        if(this.$store.state.userid === uid){
          this.$message({
            message: '不能收藏自己发布的商品！',
            type: 'warning'
          });
          return null;
        }
        //判断商品是否添加
        this.$axios.post('/product/selectLoveById', {
          uid: this.$store.state.userid,
          pid: id
        }).then(res => {
          if(res.data < 1){
            //商品添加收藏
            this.$axios.post('/product/insertProductToLove', {
              uid: this.$store.state.userid,
              pid: id
            }).then(res => {
              if(res.data === 1){
                this.updateCollectionStatus(id, true);
                this.$message({
                  message: '商品收藏成功！',
                  type: 'success'
                });
              }
            })
          }else{
            this.updateCollectionStatus(id, false);
            this.$message({
              message: '已取消收藏',
              type: 'info'
            });
          }
        });
      }else{
        this.$message({
          type: "warning",
          message: "请登录！"
        });
      }
    },
    //统计点击量
    clickNum(){
      //判断数据库中是否存在当前日期
      this.$axios.post('/utils/selectDateFromStatis',{
        dates: moment().format('YYYY-MM-DD')
      }).then(res => {
        if(res.data.length === 0){
          //如果数据库不存在今天的数据，插入今天日期与默认点击量
          this.$axios.post('/utils/insertDateInStatis',{
            dates: moment().format('YYYY-MM-DD'),
          });
        }else{
          //如果数据库存在今天的数据，获取当日点击量+1
          this.$axios.post('/utils/updateNumInStatis',{
            id: res.data.id,
            clickNum: (res.data.clickNum+1)
          });
        }
      });
    },
    // 检查商品收藏状态
    checkCollectionStatus(product) {
      this.$axios.post('/product/selectLoveById', {
        uid: this.$store.state.userid,
        pid: product.id
      }).then(res => {
        this.$set(product, 'isCollected', res.data >= 1);
      });
    },
    // 更新商品收藏状态
    updateCollectionStatus(productId, status) {
      // 更新推荐商品列表
      if(this.recommendpro) {
        const product = this.recommendpro.find(item => item.id === productId);
        if(product) {
          this.$set(product, 'isCollected', status);
        }
      }
      // 更新最新商品列表
      if(this.newpro) {
        const product = this.newpro.find(item => item.id === productId);
        if(product) {
          this.$set(product, 'isCollected', status);
        }
      }
    },
    // 获取折扣
    getDiscount(item) {
      if (item.originalprice && item.currentprice && item.originalprice > item.currentprice) {
        const discount = (item.currentprice / item.originalprice * 10).toFixed(1);
        return discount < 10 ? discount : null;
      }
      return null;
    },
    getSlideTitle(index) {
      const titles = [
        "发现校园二手好物",
        "品质生活，从这里开始"
      ];
      return titles[index % titles.length];
    },
    getSlideDescription(index) {
      const descriptions = [
        "为大学生提供安全、便捷的二手交易平台",
        "精选优质商品，让闲置资源焕发新生"
      ];
      return descriptions[index % descriptions.length];
    },
    setCurrentSlide(index) {
      this.current = index;
    },
    getCategoryIcon(id) {
      // Implement the logic to get category icon based on id
      return "el-icon-category-" + id;
    },
    handleImageLoad() {
      // 强制更新轮播图布局
      this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
        
        // 确保轮播图高度正确
        const carousel = document.querySelector('.modern-carousel');
        if (carousel) {
          const container = carousel.querySelector('.el-carousel__container');
          if (container) {
            container.style.height = '100%';
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.main-content {
  padding: 20px 0;
}

/* 搜索组件样式 */
.search-component {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

/* Hero区域样式 */
.hero-section {
  margin-bottom: 40px;
}

.hero-wrapper {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

/* 分类列表样式 */
.category-list {
  background: #fff;
  height: 500px;
  overflow-y: auto;
}

.category-list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.category-item {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.3s;
  color: #606266;
}

.category-item:hover {
  background: #f5f7fa;
  color: #409EFF;
}

/* 轮播图样式 */
.banner-container {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.banner-carousel, 
.banner-carousel :deep(.el-carousel__container) {
  height: 100% !important;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: white;
  z-index: 2;
  max-width: 50%;
  text-align: left;
}

.banner-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 16px;
}

.banner-description {
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.9;
  line-height: 1.6;
}

.banner-button {
  padding: 12px 24px;
  font-size: 16px;
}

/* 移动端适配 */
@media (max-width: 992px) {
  .hero-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 300px;
  }
  
  .category-list {
    height: auto;
    max-height: 300px;
  }
  
  .banner-container {
    height: 300px;
  }
  
  .banner-title {
    font-size: 28px;
  }
  
  .banner-description {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .hero-wrapper {
    grid-template-rows: auto auto;
    box-shadow: none;
    border-radius: 0;
  }
  
  .category-list {
    background: #f5f7fa;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  
  .category-list ul {
    display: flex;
  }
  
  .category-item {
    display: inline-block;
    padding: 10px 15px;
    border-bottom: none;
    margin: 5px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  
  .category-item i {
    display: none;
  }
  
  .banner-container {
    height: 200px;
  }
  
  .banner-content {
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
  }
  
  .banner-title {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .banner-description {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .banner-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* 通用section样式 */
.section-container {
  margin-bottom: 40px;
  padding: 20px 0;
  position: relative;
  min-height: 200px;
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.section-header h2 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  padding: 0 15px;
}

.section-header h2::before,
.section-header h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 1px;
  background: #dcdfe6;
}

.section-header h2::before {
  left: -35px;
}

.section-header h2::after {
  right: -35px;
}

.divider {
  width: 40px;
  height: 3px;
  background: #409EFF;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: shine 2s infinite;
}

@keyframes shine {
  to {
    left: 100%;
  }
}

/* 商品卡片网格样式 */
.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #409EFF08 0%, #409EFF03 100%);
  opacity: 0;
  transition: opacity 0.3s;
}

.product-card:hover::before {
  opacity: 1;
}

.product-image {
  height: 200px;
  overflow: hidden;
  cursor: pointer;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-image:hover img {
  transform: scale(1.1);
}

.product-info {
  padding: 15px;
  position: relative;
  z-index: 1;
}

.product-name {
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  padding-bottom: 5px;
}

.product-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #409EFF;
  transition: width 0.3s;
}

.product-name:hover::after {
  width: 100%;
}

.product-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 14px;
  color: #f56c6c;
}

.price-value {
  font-size: 20px;
  font-weight: bold;
  color: #f56c6c;
}

.original-price {
  font-size: 12px;
  color: #909399;
  text-decoration: line-through;
  margin-left: 8px;
}

.discount-tag {
  transform: scale(0.85);
  transform-origin: right;
  margin-left: auto;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-date {
  color: #909399;
  font-size: 12px;
}

/* 热门商品区域样式现代化 */
.hot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hot-category {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hot-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.hot-category-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f2f5;
  background: #f9fafc;
}

.hot-category-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.hot-category-icon {
  color: #409EFF;
  font-size: 18px;
}

.view-more-btn {
  color: #909399;
  transition: all 0.3s;
  padding: 0;
  margin: 0;
}

.view-more-btn:hover {
  color: #409EFF;
}

.view-more-btn i {
  transition: transform 0.3s;
}

.view-more-btn:hover i {
  transform: translateX(3px);
}

.hot-items {
  padding: 0;
  margin: 0;
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hot-item {
  position: relative;
  padding: 12px 15px;
  border-bottom: 1px solid #f0f2f5;
  transition: all 0.3s;
  cursor: pointer;
}

.hot-item:last-child {
  border-bottom: none;
}

.hot-item:hover {
  background: #f5f7fa;
}

.hot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}

.hot-badge :deep(.el-badge__content) {
  background-color: #f56c6c;
  border: none;
  transform: scale(0.8);
  transform-origin: right top;
}

.hot-item-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.item-name {
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s;
  margin-right: 30px; /* 为徽章留出空间 */
}

.hot-item:hover .item-name {
  color: #409EFF;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.item-price {
  font-size: 14px;
  color: #f56c6c;
  font-weight: 500;
}

.item-date {
  font-size: 12px;
  color: #909399;
}

/* 热门商品响应式布局 */
@media (max-width: 1200px) {
  .hot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 992px) {
  .hot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .hot-category-header {
    padding: 12px 15px;
  }
  
  .hot-category-title {
    font-size: 15px;
  }
  
  .hot-item {
    padding: 10px 15px;
  }
}

@media (max-width: 768px) {
  .hot-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .hot-category {
    margin-bottom: 0;
  }
  
  .hot-category-header {
    padding: 15px;
  }
  
  .hot-category-title {
    font-size: 16px;
  }
  
  .hot-items {
    max-height: none;
  }
  
  .hot-item {
    padding: 12px 15px;
  }
  
  .item-name {
    font-size: 14px;
    white-space: normal;
    line-height: 1.4;
  }
}

/* 现代化轮播图样式 */
.modern-carousel {
  --el-carousel-arrow-size: 36px;
  --el-carousel-arrow-background: rgba(31, 45, 61, 0.5);
  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.7);
}

.modern-carousel :deep(.el-carousel__arrow) {
  border-radius: 50%;
  background-color: var(--el-carousel-arrow-background);
  transition: all 0.3s;
}

.modern-carousel :deep(.el-carousel__arrow:hover) {
  background-color: var(--el-carousel-arrow-hover-background);
  transform: scale(1.1);
}

.modern-carousel :deep(.el-carousel__arrow--left) {
  left: 20px;
}

.modern-carousel :deep(.el-carousel__arrow--right) {
  right: 20px;
}

.carousel-item {
  position: relative;
  height: 100%;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.carousel-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: white;
  z-index: 2;
  max-width: 50%;
  text-align: left;
}

.carousel-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 16px;
  animation: fadeInUp 0.8s both;
}

.carousel-description {
  font-size: 18px;
  margin-bottom: 24px;
  opacity: 0.9;
  line-height: 1.6;
  animation: fadeInUp 0.8s 0.2s both;
}

.carousel-button {
  padding: 12px 24px;
  font-size: 16px;
  animation: fadeInUp 0.8s 0.4s both;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s;
}

.indicator-dot.active {
  background-color: white;
  transform: scale(1.2);
}

.indicator-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滚动条美化 */
.page-container ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.page-container ::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.page-container ::-webkit-scrollbar-track {
  background: #f5f7fa;
}

/* 文字选中效果 */
.page-container ::selection {
  background: #409EFF33;
  color: #409EFF;
}

/* 收藏按钮样式优化 */
.collect-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
}

.collect-btn:hover {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.collect-btn.is-collected {
  background-color: #409EFF;
  border-color: #409EFF;
  color: #ffffff;
}

.collect-btn.is-collected:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 收藏按钮动画效果 */
.collect-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.collect-btn:active::before {
  width: 200%;
  height: 200%;
}

/* 收藏状态切换动画 */
.collect-btn {
  animation: buttonPop 0.3s ease-out;
}

@keyframes buttonPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* 我的商品样式 */
.my-product {
  position: relative;
  border: 1px solid #ebeef5;
  background: #ffffff;
}

.my-product::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #67c23a20, transparent) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.my-product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #409EFF;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 4px;
  animation: badgeFadeIn 0.3s ease-out;
}

@keyframes badgeFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.my-product-badge .el-icon-star-on {
  color: #fff;
  font-size: 14px;
}

.my-product-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #409EFF;
  font-size: 13px;
  background: #ecf5ff;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #d9ecff;
}

.my-product-label .el-icon-user {
  font-size: 14px;
}

.my-product .product-name {
  color: #303133;
}

.my-product .product-name::after {
  background: #409EFF;
}

.my-product:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

/* 确保收藏按钮在自己的商品上不显示 */
.my-product .collect-btn {
  display: none;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 992px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .product-image {
    height: 180px;
  }
  
  .product-info {
    padding: 12px;
  }
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .product-image {
    height: 150px;
  }
  
  .product-info {
    padding: 10px;
  }
  
  .product-name {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .product-price {
    margin-bottom: 8px;
  }
  
  .price-symbol {
    font-size: 12px;
  }
  
  .price-value {
    font-size: 16px;
  }
  
  .product-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .collect-btn {
    padding: 5px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .product-image {
    height: 120px;
  }
  
  .product-info {
    padding: 8px;
  }
  
  .product-name {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .product-price {
    padding: 2px 6px;
    margin-bottom: 6px;
  }
  
  .price-value {
    font-size: 14px;
  }
  
  .product-date {
    font-size: 11px;
  }
}
</style>
